{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>消息框</li>
  </ol>
<section class="demo-section">
<div id="pageContent">

<article><p>消息框能够轻松展示一些需要引起用户注意的内容。</p></article>




<section><header><h3>不同感情色彩的消息框</h3></header><article><p>这里提供了5中色彩的消息框用于不同场合。</p><div class="example">
  <div class="alert">
    <h4>你好</h4>
    <hr>
    <p>有一些内容你可能需要知道。</p>
  </div>
  <div class="alert alert-primary">
    <h4>Hello</h4>
    <hr>
    <p>World.</p>
  </div>
  <div class="alert alert-success">
    <h4>太好了!</h4>
    <hr>
    <strong>一切已准备就绪。</strong>
  </div>
  <div class="alert alert-info">
    <strong>Hi!</strong> 这条消息可能需要你注意。
  </div>
  <div class="alert alert-warning">
    <strong>注意!</strong> 看起来遇到一些问题。
  </div>
  <div class="alert alert-danger">
    <h4>不好了!</h4>
    <p>确实遇到了问题，请立即处理吧。</p>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-primary"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-danger"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-success"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-warning"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-info"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>




<section><header><h3>使用图标</h3></header><article><p>在消息框中使用醒目的合适的图标能更容易让用户接收。需要使<code>.alert</code>配合<code>.with-icon</code>参数一起使用。</p><div class="example">
  <div class="alert with-icon">
    <i class="icon-inbox"></i>
    <div class="content">
      <h4>你好</h4>
      <hr>
      <p>有一些内容你可能需要知道。</p>
    </div>
  </div>
  <div class="alert alert-success with-icon">
    <i class="icon-ok-sign"></i>
    <div class="content">
      <h4>太好了!</h4>
      <hr>
      <strong>一切已准备就绪。</strong>
    </div>
  </div>
  <div class="alert alert-primary with-icon">
    <i class="icon-star"></i>
    <div class="content">
      <h4>Hello</h4>
      <hr>
      <p>World.</p>
    </div>
  </div>
  <div class="alert alert-info with-icon">
    <i class="icon-info-sign"></i>
    <div class="content"><strong>Hi!</strong> 这条消息可能需要你注意。</div>
  </div>
  <div class="alert alert-warning with-icon">
    <i class="icon-frown"></i>
    <div class="content"><strong>注意!</strong> 看起来遇到一些问题。</div>
  </div>
  <div class="alert alert-danger with-icon">
    <i class="icon-remove-sign"></i>
    <div class="content">
      <h4>不好了!</h4>
      <p>确实遇到了问题，请立即处理吧。</p>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-success with-icon"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-ok-sign"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>



<section><header><h3>使用反色主题</h3></header><article><div class="example">
  <div class="alert alert-inverse with-icon">
    <i class="icon-inbox"></i>
    <div class="content">
      <h4>你好</h4>
      <hr>
      <p>有一些内容你可能需要知道。</p>
    </div>
  </div>
  <div class="alert alert-primary-inverse with-icon">
    <i class="icon-star"></i>
    <div class="content">
      <h4>Hello</h4>
      <hr>
      <p>World.</p>
    </div>
  </div>
  <div class="alert alert-success-inverse with-icon">
    <i class="icon-ok-sign"></i>
    <div class="content">
      <h4>太好了!</h4>
      <hr>
      <strong>一切已准备就绪。</strong>
    </div>
  </div>
  <div class="alert alert-info-inverse with-icon">
    <i class="icon-info-sign"></i>
    <div class="content"><strong>Hi!</strong> 这条消息可能需要你注意。</div>
  </div>
  <div class="alert alert-warning-inverse with-icon">
    <i class="icon-frown"></i>
    <div class="content"><strong>注意!</strong> 看起来遇到一些问题。</div>
  </div>
  <div class="alert alert-danger-inverse with-icon">
    <i class="icon-remove-sign"></i>
    <div class="content">
      <h4>不好了!</h4>
      <p>确实遇到了问题，请立即处理吧。</p>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-inverse"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-primary-inverse"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-danger-inverse"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-success-inverse"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-warning-inverse"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-info-inverse"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>




<section><header><h3>块级消息</h3></header><article><p>块级消息框将没有外边距和边框圆角，适合用在页面顶部或者浮现在页面之上</p><div class="example no-padding borderless">
  <div class="alert alert-success alert-block with-icon">
    <i class="icon-ok-sign"></i>
    <div class="content"><strong>太好了!</strong> 一切已准备就绪。</div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-block"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>




<section><header><h3>消息框中的链接</h3></header><article><p>当消息框中包含链接时，推荐使用工具栏<code>.alert-link</code>来使得链接的样式与消息框类型保持一致。</p><div class="example">
  <div class="alert with-icon">
    <i class="icon-inbox"></i>
    <div class="content"><strong>你好!</strong> <a class="alert-link" href="###">有一些内容</a>你可能需要知道。</div>
  </div>
  <div class="alert alert-primary with-icon">
    <i class="icon-star"></i>
    <div class="content">
      <h4>Hello</h4>
      <hr>
      <p><a href="###">World.</a></p>
    </div>
  </div>
  <div class="alert with-icon alert-success">
    <i class="icon-ok-sign"></i>
    <div class="content"><strong>太好了!</strong> 一切已<a class="alert-link" href="###">准备就绪</a>。</div>
  </div>
  <div class="alert with-icon alert-info">
    <i class="icon-info-sign"></i>
    <div class="content"><strong>Hi!</strong> 这条消息可能<a class="alert-link" href="###">需要你注意</a>。</div>
  </div>
  <div class="alert with-icon alert-warning">
    <i class="icon-frown"></i>
    <div class="content"><strong>注意!</strong> 看起来遇到<a class="alert-link" href="###">一些问题</a>。</div>
  </div>
  <div class="alert with-icon alert-danger">
    <i class="icon-remove-sign"></i>
    <div class="content"><strong>不好了!</strong> 确实遇到了问题，请<a class="alert-link" href="###">立即处理</a>吧。</div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert"</span><span class="tag">&gt;</span><span class="pln">注意消息框中的</span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert-link"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/url/"</span><span class="tag">&gt;</span><span class="pln">链接</span><span class="tag">&lt;/a&gt;</span><span class="pln">。</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>



<section><header><h3>可以关闭的消息框</h3></header><article><p>可以用一个可选的<code>.alert-dismissable</code>和关闭按钮。</p><div class="example example-alert-dismissable">
  <div class="alert alert-warning alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <strong>注意!</strong> 看起来遇到一些问题。
    <p>您可以点击右上角的 <i class="icon-remove"></i> 来关闭这条消息。</p>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-warning alert-dismissable"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"close"</span><span class="pln"> </span><span class="atn">data-dismiss</span><span class="pun">=</span><span class="atv">"alert"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln">×</span><span class="tag">&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;p&gt;</span><span class="pln">您可以点击右上角的 </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-remove"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 来关闭这条消息。</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section></div>
</section>
{/block}